/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-10 10:05:34
 * @LastEditTime : 2023-05-10 10:20:50
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Template\ScheduleAccumulate.jsx
 * @Description  :
 */
import './Scss/ScheduleAccumulate.scss'
import dayjs from 'dayjs'
import { Http } from '../../../../Common/Api'
import { Column } from '@ant-design/plots'
import { useState, useEffect, useRef } from 'react'
import { useSize, useRequest } from 'ahooks'

export const ScheduleAccumulate001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    // Thr
    const [DataThr, setDataThr] = useState([
        { type: '建安费', value: parseInt(Math.random() * 100) },
        { type: '征地拆迁费', value: parseInt(Math.random() * 100) },
        { type: '管理费', value: parseInt(Math.random() * 100) },
        { type: '预备费', value: parseInt(Math.random() * 100) },
        { type: '利息', value: parseInt(Math.random() * 100) },
    ])
    const [ChartsThr, setChartsThr] = useState()
    const [DataFou, setDataFou] = useState([])
    const [ChartsFou, setChartsFou] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const configThr = {
                data: DataThr,
                autoFit: false,
                width,
                height: height,
                appendPadding: 8,
                maxColumnWidth: 14,
                xField: 'type',
                yField: 'value',
                color: 'l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)',
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
                tooltip: {
                    formatter: ({ type, value }) => {
                        return { name: type, value: `${value}% ( ${DataThr.find(v => v.type === type).number} 万元 )` }
                    },
                },
            }
            setChartsThr(configThr)
            const configFou = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 8,
                data: DataFou,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 8,
                    itemName: { style: { fill: '#FAD688', fontSize: 12 } },
                },

                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },

                scrollbar: {
                    type: 'horizontal',
                    height: 4,
                    categorySize: 80,
                    style: {
                        trackColor: 'rgba(178, 251, 253, 0.2)',
                        thumbColor: 'rgba(178, 251, 253, 1)',
                        thumbHighlightColor: '#367EF2',
                    },
                },
            }
            setChartsFou(configFou)
        }
    }, [size, DataThr, DataFou])

    const { runAsync: getProgressGetAccumulativeAmountByInvestList } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(
                ({ tableName, amount, accumulativeAmount }) =>
                    (data = [
                        ...data,
                        {
                            type: tableName,
                            value: parseInt((accumulativeAmount / amount) * 10000) / 100,
                            number: parseInt(accumulativeAmount / 10000),
                        },
                    ]),
            )
            setDataThr(data)
        },
    })
    const { runAsync: getProgressGetInvestListAccumulativeAmount } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(
                ({ tableName, amount, formerAmount, thisYearAmount }) =>
                    (data = [
                        ...data,
                        { name: '往年完成', type: tableName, value: parseInt((formerAmount / amount) * 10000) / 100 },
                        { name: '本年完成', type: tableName, value: parseInt((thisYearAmount / amount) * 10000) / 100 },
                    ]),
            )
            setDataFou(data)
        },
    })

    useEffect(() => {
        getProgressGetAccumulativeAmountByInvestList({ url: 'getProgressGetAccumulativeAmountByInvestList' })
        getProgressGetInvestListAccumulativeAmount({
            url: 'getProgressGetInvestListAccumulativeAmount',
            data: { Date: dayjs().format('YYYY') },
        })
    }, [getProgressGetAccumulativeAmountByInvestList, getProgressGetInvestListAccumulativeAmount])

    return (
        <div className="ScheduleAccumulate001">
            <div>
                <div className="Charts" ref={ChartsBox}>
                    {ChartsThr && <Column {...ChartsThr} />}
                </div>
            </div>
            <div>
                <div className="TitleSmall">
                    <div>建安费</div>
                    <div />
                </div>
                <div className="Charts">{ChartsFou && <Column {...ChartsFou} />}</div>
            </div>
        </div>
    )
}
